<!-- 学社 - 成员 - 学社资料 -->
<template>
  <view>
    <!-- <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData"> -->
    <!-- <template #top> -->
    <z-navbar title="学社资料" :border-bottom="true" bg-color="#F4AE20"></z-navbar>
    <!-- </template> -->
    <view class="pt-5 pb-20">
      <view class="px-4 mb-4">
        <!-- 基本信息 -->
        <view class="flex justify-between">
          <view class="flex flex-col flex-1 text-single">
            <view class="text-single c-#333 text-xl font-bold">{{ state.detailData?.info?.club_name }}</view>
            <view class="mb-1 c-#666 text-28">学社ID：{{ state.detailData?.info?.clubId }}</view>
            <u-image v-if="state.detailData?.info?.creator?.company_auth" width="144" height="32"
              src="/static/images/home/img_company_auth.png"></u-image>
          </view>
          <u-image width="254" height="170" border-radius="12" :src="state.detailData?.info?.cover_image"></u-image>
        </view>
        <!-- 学社介绍 -->
        <view class="flex mt-3">
          <image class="w-26 h-30 mr-2 flex-shirk-0 mt-0.5" src="/static/images/home/ic_intro.png"></image>
          <text class="c-#999 text-sm flex-1">{{ state.detailData?.info?.club_introduce }}</text>
        </view>
      </view>
      <view class="bg-#F5F5F5 w-full h-12"></view>
      <view v-if="state.detailData?.member_list" class="p-4">
        <view class="c-#333 text-28 font-bold">阵营介绍</view>
        <view v-for="(item, index) in state.detailData?.member_list" :key="index">
          <view class="flex items-center h-80 mt-4">
            <u-image class="flex-shirk-0" shape="circle" width="80" height="80"
              :src="item.user?.avatar ?? '/static/images/user/ic_def_avatar.png'"
              @click="toHomePage(item.user_id)"></u-image>
            <view class="flex-1 flex flex-col justify-between ml-3 h-76 text-single">
              <view class="flex items-center">
                <view class="c-#333 text-32" @click="toHomePage(item.user_id)">{{ item.user?.nickname }}</view>
                <view class="tag-identity ml-2"
                  :style="{ backgroundColor: tagColor[item.member_position - 1] ?? '#F4AF22' }">{{
                    formatIdentity(item.member_position) }}</view>
              </view>
              <view @click="onIntro(item)" class="c-#999 text-24 text-single">{{ item.intro || '社长还没有为该成员编辑介绍哦' }}</view>
            </view>
            <!-- <image class="flex-shrink-0 w-31 h-6" src="/static/images/common/ic_more.png" /> -->
            <image v-if="item.intro" class="flex-shrink-0 w-13 h-24 ml-1" src="/static/images/home/ic_more.png" />
          </view>
        </view>
      </view>
    </view>

    <!-- 介绍编辑弹窗 -->
    <u-modal v-model="state.showEditModal" :show-title="false" border-radius="12" :show-cancel-button="false"
      :show-confirm-button="false">
      <view class="slot-content">
        <view @click="state.showEditModal = false" class="absolute top-0 right-17 w-166 h-166 flex justify-end">
          <image class="mt-3 mr-2 w-22 h-22" src="/static/images/home/ic_delete.png" />
        </view>

        <view class="flex items-center h-80 mt-4">
          <u-image class="flex-shirk-0" shape="circle" width="80" height="80"
            :src="state.user?.avatar ?? '/static/images/user/ic_def_avatar.png'"></u-image>
          <view class="flex-1 flex items-center text-single ml-2">
            <view class="c-#333 text-32 text-single">{{ state.user?.nickname }}</view>
            <view v-if="state.member_position > 0" class="tag-identity ml-2"
              :style="{ backgroundColor: tagColor[state.member_position] ?? '#F4AF22' }">{{ identity }}
            </view>
          </view>
        </view>
        <view class="relative mt-4 mb-3">
          <!-- <u-input v-model="state.intro" type="textarea" height="240" auto-height placeholder="成员介绍编辑"
            :maxlength="state.maxInputNum" placeholder-style="color: #999; fontSize: 24rpx" :custom-style="inputStyle" /> -->
          <view class="bg-#f6f6f6 rounded-2 p-2 h-240 c-#333 tect-24">{{ state.intro }}</view>
          <u-line color="#E5E5E5" />
        </view>
        <view class="flex items-center justify-center">
          <view class="btn-save" @click="state.showEditModal = false">知道了</view>
        </view>
      </view>
    </u-modal>

    <!-- </z-paging-list> -->
  </view>
</template>

<script setup>
import { formatIdentity, toHomePage } from '@/common/util/util'
import { getMemberDetail } from '@/common/http/module/society.js'
import { societyIdentity } from '@/common/constant/society.js'

// const list = ref();
const state = reactive({
  club_id: '', // 学社id
  detailData: null, // 学社管理详情数据
  isAuth: true,
  list: [],
  showEditModal: false,
  intro:'',
  user:'',
  member_position:''
})

function loadData() {
  getMemberDetail(state.club_id).then((res) => {
    state.detailData = res.data
  });
  // list.value.onLoadResult(page ? [1, 2, 3, 4, 5, 6, 7, 8] : "");
}

// 阵营介绍编辑
function onIntro(item) {
  if(!item.intro) return
  state.intro = item.intro
  state.user = item.user
  state.member_position = item.member_position
  state.showEditModal = true
}

// 身份标签颜色 1-顾问 2-管理员 3-社长 
const tagColor = ['#F8DC61', '#6FC9E7', '#F4AF22']
// 学社身份中文名
const identity = computed(() => societyIdentity.find(v => v.value == state.member_position)?.label)


onLoad(options => {
  state.club_id = options.club_id
  loadData();
});
</script>

<style lang="scss" scoped>
.tag-identity {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rpx 10rpx;
  color: #FFFFFF;
  font-size: 20rpx;
}

.btn-save {
  width: 100%;
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
  background-color: #F4AF22;
}

.slot-content {
  position: relative;
  padding: 24rpx 40rpx 40rpx;
}
</style>
